extends ../templates/main.jade

block head
  link(rel="stylesheet" href="bingo.css")
  script(type="module" src="bingo.js")

block title
  | Bingo | xigoi

block content
  h1 Bingo
  noscript
    .error This page requires JavaScript to function properly. Please enable scripts in your browser.
  template(v-if="bingoGenerated")
    .bingo-grid-wrapper
      table.bingo-grid
        tr(v-for="row in grid")
          td.bingo-cell(v-for="cell in row" v-bind:class="{crossed: cell.crossed}" v-on:click="cell.crossed = !cell.crossed")
            | {{cell.text}}
    p
      button(v-on:click="bingoGenerated = false") Change
  template(v-else)
    p
      label(for="bingo-input") Phrases (one per line)
      textarea.bingo-input#bingo-input(v-model="input")
    p
      label(for="bingo-size-input") Size
      input#bingo-size-input(type="number" v-model.number="gridSize" min="2")
    p
      button(v-if="enoughPhrases" type="button" v-on:click="generate") Generate
      .error(v-if="!enoughPhrases") You need at least {{gridSize * gridSize}} phrases to generate a bingo of size {{gridSize}}, but you have only {{phrases.length}} phrase{{phrases.length === 1 ? '' : 's'}}.
